<template>
  <el-button
    v-if="visible"
    class="filter-item"
    style="margin-left: 10px;"
    :type="type"
    :icon="icon"
    @click="handle"
  >{{ $t(name) }}</el-button>
</template>

<script>
export default {
  name: 'PermissionBtn',
  props: {
    auth: {
      type: String,
      default: ''
    },
    name: { type: String, default: '' },
    btnType: { type: String, default: '' },
    myIcon: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      type: 'primary',
      icon: ''
    }
  },
  created() {
    if (this.btnType) {
      this.type = this.btnType
    }
    if (!this.auth) {
      this.visible = true
      if (this.myIcon) {
        this.icon = this.myIcon
      }
      return
    } else {
      const btns = this.$store.getters.btnPermission
      btns.forEach(item => {
        if (item.perms === this.auth) {
          this.visible = true
          if (this.myIcon) {
            this.icon = this.myIcon
          } else {
            this.icon = item.icon
          }
          return
        }
      })
    }
  },
  methods: {
    handle() {
      this.$emit('handle')
    }
  }
}
</script>
